<script setup lang="ts">
import SonSonPage from '@/views/SonSonPage.vue'
/*

// 演示 父传子
// 我们先传递一个基本数据类型
const fatherDate = ref('父组件的数据')
const fatherPage = ref('父组件的数据2')
// 我们尝试传递一个对象
const post = {
  id: 1,
  msg: '这是信息'
}*/

// 使用更简单的方法 传递值
/*const countModel = ref(0)

// 将这个值传递给子组件 修改子组件某个元素的状态
let flag = ref(false)

function show() {
  flag.value = true
}*/




// 演示 子传父 我们先看子组件
// 既然是子传父 则子组件是第一步
function handleChange(data: any) {
  // 4.拿到子组件传递的值
  console.log(data, '父组件接收')
  // 如果子组件传递的是对象 我们需要使用点语法来获取属性值
  // console.log(data.id, '子组件传递的是对象 我们需要使用点语法')
}
</script>

<template>
  <h1>父组件</h1>
  <!--  父传子 以添加属性的方式给父组件的子组件进行传值-->
  <!--  如果我们传递是一个对象形式 则需要使用v-bind直接等于这个对象 -->
  <!--  <son-son-page :toSon="fatherDate" :toSon2="fatherPage" v-bind="post"></son-son-page>-->
  <!--  我上面使用v-bind将post整个对象传递进去 -->

  <!--    <son-son-page v-model="countModel"></son-son-page>-->

  <!--  传递一个布尔值 控制子组件的显示与隐藏-->
  <!--  <son-son-page v-model="flag"></son-son-page>-->
  <!--  <button @click="show">显示</button>-->


  <!--  演示子传父-->
  <!--  3.在父组件的子组件中 定义一个事件 = 函数 我们在父组件中定义这个函数-->
  <son-son-page @change="handleChange"></son-son-page>
</template>

<style scoped>

</style>
